<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文章页</title>

    <link rel="stylesheet" type="text/css" href="./css/home.css">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <div class="banner"></div>
    <div class="box">
        <div class="banner_mask">
            <img src="./img/logo.png" style="position: relative;width: 70px;top: 90px;left: 50%;transform: translateX(-50%);">
        </div>
        <div class="nav">
            <ul>
                <li><a href="#" class="navSelected">首页</a></li>
                <li><a href="#">论坛</a></li>
                <li><a href="#">快捷手册</a></li>
                <li><a href="#">中文文档</a></li>
                <li><a href="#">下载</a></li>
                <li><a href="#">关于</a></li>
            </ul>
        </div>
        <div class="main">
            <div class="main_box">
                <div class="content" v-for="item in result">
                    <div class="content_box">
                        <p class="pTitle">{{item.title}}</p>
                        <p class="form">作者：<span style="color: #e67e22">{{item.author}}</span> · {{item.createTime}}</p>
                        <p class="contentText">{{item.content}}</p>
                        <div class="read" @click="read(item.id)">阅读全文</div>
                        <hr class="endHr">
                        <span style="color: #959595;font-size: 14px;padding-left: 40px;position:relative;top: 55px">摘要</span>
                    </div>
                </div>
                <div class="side">
                    <div class="side_box">
                        <div class="pTitleS"><span>社区</span></div>
                        <p>QQ群：277327792</p>
                        <p style="color: #e67e22">问答社区</p>
                        <p style="color: #e67e22">官方微博</p>
                    </div>
                    <div class="side_box">
                        <div class="pTitleS"><span>下载 Ghost</span></div>
                        <div class="download">Ghost 中文版（0.7.4）</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    let app = new Vue({
        el: '#app',
        data() {
            return {
                result: [
                    {
                        id: 0,
                        title: "自定义文章摘要（ Excerpt ）",
                        author: "王赛",
                        createTime: "2017年8月9日",
                        content: "随着 Ghost 1.0 和 Hemingway Mode 的发布，今天我们又发布了“自定义文章摘要”功能。 默认情况下，Ghost 会截取文章正文开头部分的文字（一般是55个字）作为文章摘要并显示在文章归档列表中。摘要有助于读者快速了解文章所要表达的内容。但是，如果你希望自己定",
                    },{
                        id: 1,
                        title: "首要”标签“",
                        author: "王赛",
                        createTime: "2017年8月3日",
                        content: "在 Ghosst 中，每一篇博文都可以有多个标签（ tag ），并且这些标签的排列顺序也被 Ghost 完整保存。第一个标签被认为是最重要的，因此被特殊对待。现在，你可以在后台通过拖拽标签的位置来设置“首要标签”，并且能够通过{{tags.[0]}}获取到第一个标签。由于这种语法",
                    },{
                        id: 2,
                        title: "Node.js v4 LTS 成为 Ghost 推荐版本",
                        author: "王赛",
                        createTime: "2017年7月26日",
                        content: "从这周起，我们将 Ghost 推荐 Node.js 版本升级为 Node.js v4 LTS。我们这样做汽是已经落后于计划了。然而，经过大量测试之后，我们确信 Ghost 可以在 Node.js v4 平台上流畅的运行并且内存消耗比原来也减少了。目前，Ghost(Pro)上托",
                    }
                ]
            }

        },
        created() {

        },
        methods: {
            read: function (id) {
                window.location.href = "./article.html?id=" + id
            }
        }
    })
</script>
</html>